<template>
  <div>
    <van-search
      v-model="searchQuery"
      placeholder="搜索项目"
      show-action
      @search="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <van-button type="primary" size="small" round @click="onSearch">搜索</van-button>
      </template>
    </van-search>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in filteredItems" :key="item" :title="item" @click="onItemClick(item)" />
    </van-list>

    <van-button type="primary" block @click="onLoad">加载更多</van-button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { Cell as VanCell, List as VanList, Search as VanSearch, Button as VanButton } from 'vant';

// 定义响应式变量
const searchQuery = ref('');
const items = ref([]);
const loading = ref(false);
const finished = ref(false);

// 模拟初始数据加载
onMounted(() => {
  onSearch();
});

// 定义方法
const onSearch = () => {
  // 模拟搜索功能
  items.value = ['内容增值', 'backup', '送祝福', '平台运营', 'polaris', 'monitor', 'vip运营', 'cdm'];
};

const onCancel = () => {
  searchQuery.value = '';
};

const onLoad = () => {
  loading.value = true;

  setTimeout(() => {
    // 模拟加载更多数据
    for (let i = 0; i < 2; i++) {
      items.value.push(`新项目${items.value.length + 1}`);
    }

    loading.value = false;

    if (items.value.length >= 10) {
      finished.value = true;
    }
  }, 1000);
};

const onItemClick = (item) => {
  alert(`点击了项目: ${item}`);
};

// 计算属性用于过滤搜索结果
const filteredItems = computed(() =>
  items.value.filter(item => item.toLowerCase().includes(searchQuery.value.toLowerCase()))
);
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>